<template>
    <u-popup v-model="isShow" mode="bottom" border-radius="10" length="auto" closeable @close="handleClose">
        <view class="container">
            <view v-if="hasBtn" class="con-header">
                <view v-if="score == -1 || score >= 70">
                    <view class="offer-desc">您的简历初筛通过率约为 <span class="offer-score">{{ generateRandomPercentage()
                    }}%</span></view>
                    <view class="offer-sub-desc">简历内容与当前岗位的核心要求有差别</view>
                </view>
                <view v-else>
                    <view class="offer-desc">您的简历评分只有 <span class="offer-score">{{ score }}</span> 分</view>
                    <view class="offer-sub-desc">系统会自动为企业标记内容不完善的简历</view>
                </view>
                <view class="offer-tips">机会只有1次，别让努力输在简历这一关，我们帮您：</view>
            </view>
            <view v-else>
                <view class="offer-title">一览offer派</view>
                <view class="offer-sub-title">我们承诺保offer，并为您提供以下服务：</view>
            </view>
            <view v-for="item in hasBtn ? datas : offerpaiDatas" :key="item.title" class="offer-item">
                <u-image class="icon-tick" width="88rpx" height="88rpx" :src="item.icon"></u-image>
                <view class="item-content">
                    <view class="item-title">{{ item.title }}</view>
                    <view class="item-sub-title">{{ item.content }}</view>
                </view>
            </view>
            <view class="offer-qrcode">
                <u-image class="icon-tick" width="220rpx" height="220rpx" :src="rqCode"></u-image>
                <view class="qrcode-desc">免费评定简历</view>
                <view class="qrcode-sub-desc">*具体服务以协议为准</view>
                <view v-if="hasBtn" class="qrcode-btn" @click="handleWaiveClick">放弃机会，直接投递</view>
            </view>
        </view>
    </u-popup>
</template>

<script>
import {
    getResumeOpinion,
} from "@/api/modules/career";
import {
    getConsultConfig,
} from "@/api/modules/enterprises";
export default {
    props: {
        show: {
            type: Boolean,
            default: false
        },

        // 是否有放弃机会按钮
        hasBtn: {
            type: Boolean,
            default: false
        }
    },
    watch: {
        show(newVal) {
            if (newVal) {
                this.getResumeOpinion();
                this.getQRcode();
            }
            this.isShow = newVal;
        },
    },
    data() {
        return {
            score: -1, // 简历评分
            rqCode: '', // 当前推荐码
            // isButtonClicked: false,
            isShow: false,
            datas: [
                {
                    title: "补全“隐藏加分项",
                    content: "如项目中的具体成果、技能/证书适配性",
                    icon: this.$imgBaseSelf + "offerpai/icon1.png"
                },
                {
                    title: "融合岗位JD关键词",
                    content: "融合后简历初筛通过率超过90%",
                    icon: this.$imgBaseSelf + "offerpai/icon2.png"
                },
                {
                    title: "重构简历模块逻辑",
                    content: "按‘STAR法则’排列，HR一眼看到价值",
                    icon: this.$imgBaseSelf + "offerpai/icon3.png"
                },
                {
                    title: "优化格式排版",
                    content: "手机/电脑查看简历一目了然",
                    icon: this.$imgBaseSelf + "offerpai/icon4.png"
                }
            ],
            offerpaiDatas: [
                {
                    title: "全方位测评",
                    content: "职业测评+性格分析，客观认识自己",
                    icon: this.$imgBaseSelf + "offerpai/icon1.png"
                },
                {
                    title: "补全简历“隐藏加分项”",
                    content: "如项目中的具体成果、技能/证书适配性",
                    icon: this.$imgBaseSelf + "offerpai/icon2.png"
                },
                {
                    title: "面试场景模拟",
                    content: "提前预演面试流程，轻松应对各种难题",
                    icon: this.$imgBaseSelf + "offerpai/icon3.png"
                },
                {
                    title: "量身定制《发展报告》",
                    content: "结合自身情况，为您提供职业发展报告",
                    icon: this.$imgBaseSelf + "offerpai/icon4.png"
                }
            ],
            personId: uni.getStorageSync("person-id").slice(2) || undefined,

        };
    },

    created() {
        // const storedValue = uni.getStorageSync('buttonClicked_' + this.personId);
        // if (storedValue === 'true') {
        //     this.isButtonClicked = true;
        // }
    },

    methods: {
        handleClose() {
            this.$emit("close", false);
        },
        handleWaiveClick() {
            // this.isButtonClicked = true;
            uni.setStorageSync('buttonClicked_' + this.personId, 'true');
            this.$emit("waiveClick");
        },

        // 获取用户简历评分
        getResumeOpinion() {
            const params = {
                personId: uni.getStorageSync("person-id").slice(2) || undefined,
            };
            getResumeOpinion(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.score = res.data.score;
                    }
                })
                .catch((e) => {
                    console.log('--getResumeOpinion--:' + e);
                });
        },


        getQRcode() {
            const params = {
                code: "offerpaiSalerQrcode",
            };
            getConsultConfig(params)
                .then((res) => {
                    if (res.code == 200) {
                        let urlsAry = JSON.parse(res.data[0].content);
                        if (urlsAry.length > 0) {
                            if (urlsAry.length > 1) {
                                const randomIndex = Math.floor(Math.random() * urlsAry.length);
                                const randomElement = urlsAry[randomIndex];
                                this.rqCode = randomElement;
                            } else {
                                this.rqCode = urlsAry[0];
                            }
                        }
                    }
                })
                .catch((e) => {
                    console.log('--getConsultConfig--:' + e);
                });
        },

        generateRandomPercentage() {
            // 生成5到30之间的随机数
            const min = 5;
            const max = 30;
            return Math.floor(Math.random() * (max - min + 1)) + min;
        },


    }
}
</script>
<style lang="scss">
.container {
    font-family: MiSans, MiSans;
    font-weight: 400;
    padding: 0 34rpx 60rpx 34rpx;

    .con-header {
        padding-top: 86rpx;
    }

    .offer-title {
        font-family: MiSans, MiSans;
        font-weight: 600;
        font-size: 17px;
        color: #222222;

        display: flex;
        justify-content: center;
        margin-top: 40rpx;
    }

    .offer-sub-title {
        font-family: MiSans, MiSans;
        font-weight: 400;
        font-size: 28rpx;
        color: #222222;
        margin-top: 88rpx;
    }

    .offer-desc {
        font-size: 36rpx;
        color: #222222;
    }

    .offer-sub-desc {
        font-size: 13px;
        color: #F04747;
        margin-top: 32rpx;
    }

    .offer-score {
        font-size: 48rpx;
        color: #F04747;
        margin-left: 8rpx;
    }

    .offer-item {
        display: flex;
        flex-direction: row;
        margin-top: 70rpx;
        align-items: center;

        .item-content {
            margin-left: 28rpx;

            .item-title {
                font-weight: 400;
                font-size: 14px;
                color: #222222;
            }

            .item-sub-title {
                font-weight: 400;
                font-size: 13px;
                color: #888888;
                margin-top: 18rpx;
            }
        }

    }

    .offer-tips {
        font-family: MiSans, MiSans;
        font-weight: 400;
        font-size: 13px;
        color: #222222;
        margin-top: 22rpx;
    }

    .offer-item:first-of-type {
        margin-top: 74rpx;
    }
}

.offer-qrcode {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 66rpx;
    font-family: MiSans, MiSans;
    font-weight: 400;

    .qrcode-desc {
        margin-top: 16rpx;
        font-size: 14px;
        color: #222222;
    }

    .qrcode-sub-desc {
        margin-top: 12rpx;
        font-size: 13px;
        color: #888888;
    }

    .qrcode-btn {
        margin-top: 18rpx;
        width: 422rpx;
        height: 84rpx;
        border-radius: 20px 20px 20px 20px;
        border: 1px solid #F04747;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 15px;
        color: #F04747;
    }
}
</style>